/**
 *  学习目标：Todos 案例
 */
import React from 'react'
import './styles/base.css'
import './styles/index.css'

export default class App extends React.Component {
  render() {
    return (
      <section className='todoapp'>
        {/* 头部 */}
        <header className='header'>
          <h1>todos</h1>
          <input className='new-todo' placeholder='What needs to be done?' autoFocus />
        </header>
        {/* 主体 */}
        <section className='main'>
          <input className='toggle-all' checked type='checkbox' />
          <label htmlFor='toggle-all'>Mark all as complete</label>
          <ul className='todo-list'>
            <li className='completed'>
              <div className='view'>
                <input className='toggle' type='checkbox' />
                <label>吃饭</label>
                <button className='destroy'></button>
              </div>
              <input className='edit' />
            </li>
            <li className=''>
              <div className='view'>
                <input className='toggle' type='checkbox' />
                <label>睡觉</label>
                <button className='destroy'></button>
              </div>
              <input className='edit' />
            </li>
          </ul>
        </section>
        {/* 底部 */}
        <footer className='footer'>
          <span className='todo-count'>
            <strong>1</strong> item left
          </span>
          <ul className='filters'>
            <li>
              <a className='all selected' href='#/'>
                All
              </a>
            </li>
            <li>
              <a className='active' href='#/active'>
                Active
              </a>
            </li>
            <li>
              <a className='completed' href='#/completed'>
                Completed
              </a>
            </li>
          </ul>
          <button className='clear-completed'>Clear completed</button>
        </footer>
      </section>
    )
  }
}
